<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" :label-position="labelPosition"
                 style="margin-left: 5%;margin-right: 5%">
            <el-form-item label="开户行 ：" prop="bankName">
                <div>
                    <el-input v-model="form.bankName" placeholder="例如：XXX银行XXXX支行"
                              style="width: 85%; margin-right: 5%"></el-input>
                    <el-tooltip class="item" effect="dark" content="请输入银行卡开户行支行信息，例如XXX银行XXXX支行。（支行信息可通过银行卡背面客户服务热线查询。）"
                                placement="bottom-end">
                        <span class="el-icon-info"></span>
                    </el-tooltip>
                </div>
            </el-form-item>
            <el-form-item label="银行帐号 ：" prop="bankAccount">
                <el-input v-model="form.bankAccount"></el-input>
            </el-form-item>
            <el-form-item label="户名 ：" prop="bankUname">
                <el-input v-model="form.bankUname" disabled></el-input>
            </el-form-item>
        </el-form>
        <div style="margin-top: 5%; width: 100%; text-align: center">
            <el-button type="primary" @click="previousPage" style="margin-right: 5%; margin-left: 5%;width: 39%">上一页
            </el-button>
            <el-button type="primary" @click="nextPage('form')" style="margin-right: 5%; margin-left: 5%; width:39%">
                {{accountButton}}
            </el-button>
        </div>
    </div>
</template>

<script>
    import conf from 'assets/js/conf.js'

    export default {
        data() {
            return {
                labelPosition: 'top',
                rules: {
                    bankName: [
                        {required: true, message: '请输入银行', trigger: 'blur'}
                    ],
                    bankAccount: [
                        {required: true, message: '请输入银行账号', trigger: 'blur'},
                    ],
                    bankUname: [
                        {required: true, message: '请输入户名', trigger: 'blur'},
                    ]
                }
            }
        },
        props: [
            'form',
            'accountButton',
        ],
        mounted() {

        },
        methods: {
            nextPage: function (form) {
                const _self = this;
                if (!conf.inDevelop)
                    this.$refs[form].validate((valid) => {
                        if (valid) {
                            _self.$emit('nextPage', _self.form)
                        } else {
                            alert('您输入的信息有误!!');
                            return false
                        }
                    });
                else
                    this.$emit('nextPage', this.form);
            },
            previousPage: function () {
                this.$emit('previousPage', this.form)
            }
        }
    }
</script>
<style>
    .el-form-item__label {
        line-height: 0
    }
</style>
